<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <!--可以做一些简单的运算 难以维护和阅读 重用麻烦
        split(" ")以空格分隔 一个字符串分隔之后就变成了数组 
        reverse() 逆序
        join(" ") 再转成字符串 用空格连接    
    -->
       <!--<h1> {{msg.split(" ").reverse().join(" ")}} </h1>-->
       <!-- 用函数方法做 -->
       <h1>{{getReverseMessage()}}</h1>
       <h1>{{getReverseMessage()}}</h1>
       <!-- 用计算属性 方法做 -->
       <h2>{{reverseMessage}}</h2>
       <h2>{{reverseMessage}}</h2>
    </div>
    <script>
      new Vue({
          el:"#app",
          data:{
              msg:"Hello Vuejs"
          },
          watch:{},
          methods:{
            //将逻辑封装成函数
            // 每次使用方法，有几个地方使用方法 就调用几次
            getReverseMessage(){
                console.log("getReverseMessage(){}被调用");
                return this.msg.split(" ").reverse().join(" ");
            }
          },
        //计算属性（优先使用 因为计算属性拥有缓存 能提高我们的开发效率） 类似于methods 也存储一些方法 使用时候必须当做属性   
        //当第一次调用之后 依赖的数据没有变化 就不再次调用 直接使用缓存
        // 依赖的数据变化 就调用
        computed:{
            reverseMessage(){
                console.log("reverseMessage(){}被调用");
                return this.msg.split(" ").reverse().join(" ");
            }
          }
      });
    </script>
</body>
</html>